<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
    .product_list_box{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .product_list .public_title_show{
        --ms-flex: 0 0 33.33333333333333%;
        flex:0 0 33.33333333333333%;
        max-width: 0 0 33.33333333333333%;
        background: var(--c_theme);
        color: var(--c_b_nav);
        height: 806px;
    }
    .product_list .public_title_show{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .product_list .public_title_show .public_title h2{
        color: var(--c_b_nav);
    }
    .product_list .public_title_show .public_title p{
        color: var(--c_b_nav);
        font-size:20px;
        transform: translate(-44px, 22px);
    }
    .product_list .public_title_text{
        max-width: 266px;
        margin: 0 auto;
    }
    .product_list .public_title_text p{
        font-size: var(--f_text);
        line-height: var(--l_text);
        padding: 70px 0;
        transform: translate(46px,-10px);
    }
    .product_list .public_title_more{
        width: 128px;
        height: 44px;
        background: var(--c_b_modular);
        display: flex;
        justify-content: center;
        margin: 0 auto;
        line-height: 44px;
        text-align: center;
        transform: translate(-22px,0px);
    }
    .product_list .public_title_more a{
        color: var(--c_theme);
        width: 100%;
        height: 100%;
        display: block;
    }
    .product_list_pList{
        --ms-flex: 0 0 33.33333333333333%;
        flex:0 0 33.33333333333333%;
        max-width:33.33333333333333%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        vertical-align: middle;
    }
    .product_list_pList{
        display: flex;
        text-align: center;
        max-height: 806px;
    }
    .product_pList_img{
        --ms-flex:0 0 100%;
        flex:0 0 100%;
        max-width:100%;
        max-height: 50%;
        padding: 62px 62px;
    }
    .product_list .product_list_pList:nth-child(2) .product_pList_img:nth-child(even),
    .product_list .product_list_pList:nth-child(3) .product_pList_img:nth-child(odd){
        background: var(--c_b_dark);
    }
    .product_list .product_list_pList:nth-child(2) .product_pList_img:nth-child(1),
    .product_list .product_list_pList:nth-child(3) .product_pList_img:nth-child(2){
        background: var(--c_b_top_nav);
    }
    .product_pList_img img{
        max-width: 320px;
        height: 235px;
    }
    .product_pList_img span{
        display: block;
        font-size: 20px;
        padding-top: 20px;
    }
    @media screen and (max-width:768px){
        .product_list_title_box{
            padding: 0;
        }
        .title_center .public_title{
            text-align: left;
        }
        .product_list .public_title_text p{
            transform: translate(0);
        }
        .product_list .public_title_show .public_title p{
            transform: translate(0);
        }
        .product_list .public_title_more{
            transform: translate(0,20px);
            margin: 0;
        }
        .product_list .public_title_text{
            max-width: 100%;
        }
        .product_list .public_title_text p{
            transform: translate(0);
            padding: 0;
        }
        .product_list_pList{
            margin-top: 20px;
        }
        .product_list .public_title_show{
            padding: 0 20px;
            --ms-flex: 0 0 100%;
            flex:0 0 100%;
            max-width:100%;
            height: 250px;
        }
        .product_pList_img span{
            padding: 10px 0;
        }
        .product_list_pList{
            --ms-flex: 0 0 50%;
            flex:0 0 50%;
            max-width:50%;
        }
        .product_pList_img{
            padding:0;
        }
        .product_pList_img img {
            max-width: 100%;
            height: 235px;
        }
    }
    </style>
</head>
<body>
    <div class="product_list modular">
        <div class="product_list_box">
            <div class="public_title_show title_center">
                <div class="product_list_title_box">
                    <div class="public_title">
                        <h2>PRODUCTS</h2>
                        <p>产品展示</p>
                    </div>
                    <div class="public_title_text">
                        <p>
                            产品主要分为四大类：纸质袋子、
                            企业和个人名片、产品包装还有企业画册等
                        </p>
                    </div>
                    <div class="public_title_more">
                        <a href="# ">查看更多</a>
                    </div>
                </div>
            </div>
            <div class="product_list_pList">
                <div class="product_pList_img">
                    <img src="../images/pro92.webp" alt="">
                    <span>创意纸袋</span>
                </div>
                <div class="product_pList_img">
                    <img src="../images/case_list_2_2.jpg" alt="">
                    <span>创意纸袋</span>
                </div>
            </div>
            <div class="product_list_pList">
                <div class="product_pList_img">
                    <img src="../images/pro92.webp" alt="">
                    <span>创意纸袋</span>
                </div>
                <div class="product_pList_img">
                    <img src="../images/case_list_2_2.jpg" alt="">
                    <span>创意纸袋</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
